<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
        .moreSection{
          width: 100%;
          background: url(../../image/main/userSection@2x.png) no-repeat center;
          background-size: 100% 100%;
          margin-top: 8px;
        }

        .userPhoto{
          width: 81px;
          height: 81px;
          border-radius: 50%;
          margin: 0 auto;
        }
        .userLevel{
           display: inline-block;
           width: 38px;
           margin: 0 0 -2px 3px;
        }
        .userInfonSection p{
           text-align:center;
        }
        .firstP{
          font-size: 19px;
          color: #000;
          margin: 6px 0 5px 0;
        }
        .lastP{
           line-height: 12px;
        }
        .stars{
          display: inline-block;
          width: 9px;
        }
        .userInstret{
          margin-top: 104px;
          background-color: transparent;
        }
        .aui-grid [class*=aui-col-]{
          float: right;
          line-height: 18px;
          width: 20px;
          padding: 0;
          margin:0 29px;
          color: #969696;
        }
       .floatR{
          padding-right: 40px!important;
          margin-right: 27px;
        }
        .aui-grid-label{
          font-size: 17px!important;
        }
        .comment{
          margin: 95px 0 0 0;
          width: 100%;
          padding-bottom: 19px;
        }
        .comment .firstP{
          font-size: 17px;
          color: #969696;
        }
        .comment img{
          width: 20px;
          height: 10px;
        }
        .orders{
          margin: 0px 15px 23px!important;
        }
        .secorders{
              margin-right: 100px;
        }
        /*适配屏幕320px*/
        @media (max-width: 320px){
          .msgBtn{
            width: 16px;
            margin: 15px 0 9px 12px;
          }
          .orders {
              margin: 0px 10px 18px!important;
          }
          .secorders{
             margin-right: 85px;
          }
          .aui-grid{
            /*padding: 0 30px;*/
          }
          .floatR {
               padding-right: 30px!important;
          }
          .userPhoto{
            width: 54px;
            height: 54px;
          }
          .firstP{
            font-size: 13px;
            margin: 4px 0 0px 0;
          }
          .userLevel {
              width: 26px;
          }
          .lastP{
            font-size: 10px
          }
          .stars{
            width: 6px;
          }
          .aui-grid-label{
                font-size: 12px!important;
          }
          .userInstret{
            margin-top: 71px;
          }
          .aui-grid [class*=aui-col-]{
            padding: 0 ;
          }
          .comment{
            margin: 64px 0 0 0;
          }
          .comment .firstP{
            font-size: 13px;
          }
          .comment img{
            width: 14px;
            height: 7px;
          }
        }
    </style>
</head>

<body>

            <div class="moreSection" id="moreSection" v-bind:style="{height:wHeight}" >
               <div class="userInfonSection">
                     <img class="userPhoto" :src="userPhotoSrc">
                     <p class="firstP">{{userNiName}}<img class="userLevel" src="../../image/main/le@2x.png"></p>
                     <p class="lastP">
                       <img class="stars" src="../../image/main/redStar@2x.png">
                       <img class="stars" src="../../image/main/redStar@2x.png">
                       <img class="stars" src="../../image/main/redStar@2x.png">
                       <img class="stars" src="../../image/main/redStar@2x.png">
                       <img class="stars" src="../../image/main/halfStar@2x.png">
                       4.5
                     </p>
               </div>
               <section class="aui-grid userInstret">
                           <div class="aui-col-xs-2 floatR" style="color:#000;">
                               <div class="aui-grid-label">我的信息</div>
                           </div>
                          <div class="aui-row">
                              <div class="aui-col-xs-3 orders" v-for="instrstItem in instrstList1">
                                  <div class="aui-grid-label">{{instrstItem.instrstItemName}}</div>
                              </div>
                          </div>
                          <div class="aui-row secorders">
                              <div class="aui-col-xs-3 orders" v-for="instrstItem in instrstList2">
                                  <div class="aui-grid-label">{{instrstItem.instrstItemName}}</div>
                              </div>

                          </div>
               </section>
               <div class="userInfonSection  comment" @click="gotoComment()">
                    <p class="firstP">我的评价</p>
                    <img class="userPhoto" src="../../image/main/dropArrow@2x.png">
              </div>
              </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/fastclick.js"></script>
<script type="text/javascript">
    apiready = function() {
       api.parseTapmode();
       app.init();
         //////接收编辑用户资料
       api.addEventListener({
           name: 'setUserInfo'
       }, function(ret, err) {
          var _instrstListArr1 = [];
          var _instrstListArr2 = [];
          var userInfoInterest_tag = ret.value.UserInfo.interest_tag.split(",");
              app.userNiName = ret.value.UserInfo.nickname;
              app.userPhotoSrc = ret.value.UserInfo.avatar;
          for(var i = 0; i < userInfoInterest_tag.length; i++){
            if(i < 5){
               _instrstListArr1.push({instrstItemName:userInfoInterest_tag[i]});
            }else{
               _instrstListArr2.push({instrstItemName:userInfoInterest_tag[i]});
            }
              app.instrstList1 = _instrstListArr1;///兴趣标签
              app.instrstList2 = _instrstListArr2;///兴趣标签
          }
       });
    };
    // 去掉iOS的点击延时问题
    window.addEventListener('load', function() {
        FastClick.attach(document.body);
    }, false);
    ////初始化页面
    var app = new Vue({
        el: '#moreSection',
        data: {
            wHeight: '',
            showMask1 : false,
            showMask2 : false,
            userNiName : '',
            userPhotoSrc : '',
            instrstList1 : [
              // {instrstItemName:'古筝演奏',status:false},{instrstItemName:'吉他弹奏安达市',status:false},{instrstItemName:'小提琴演奏阿萨德',status:false},
              // {instrstItemName:'团队',status:false},
              // {instrstItemName:'活动主持撒啊是',status:false}
            ],
            instrstList2 : [
              // {instrstItemName:'活动主持',status:false},{instrstItemName:'活动策划',status:false}
            ]
        },
        methods: {
            init: function() {
              /////初始化页面高度
                var wh = document.documentElement.clientHeight || document.body.clientHeight;
                    this.wHeight = (wh) + 'px';
                var userInfo = $api.getStorage('userInfo');
                var str = userInfo.interest_tag.split(",");
                var instrstListArr1 = [];
                var instrstListArr2 = [];
                    app.userNiName = userInfo.nickname;///昵称
                    app.userPhotoSrc = userInfo.avatar;///图像
                    for(var i = 0; i < str.length; i++){
                      if(i < 5){
                         instrstListArr1.push({instrstItemName:str[i]});
                      }else{
                         instrstListArr2.push({instrstItemName:str[i]});
                      }
                        app.instrstList1 = instrstListArr1;///兴趣标签
                        app.instrstList2 = instrstListArr2;///兴趣标签
                    }
            },
            gotoComment : function(){
              bf_common_view.bf_win.openWin('userComment', '../main/');
            },
            mounted:function(){

            }
        },

    });

</script>

</html>
